<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
<head>
 
    <!-- 引入 ECharts 文件 -->
	<script src="lib/jquery/jquery.min-v2.1.4.js" th:src="@{/lib/jquery/jquery.min-v2.1.4.js}"></script>
	<script src="lib/echarts_3.7.1/echarts.js" th:src="@{/lib/echarts_3.7.1/echarts.js}"></script>
    <script src="lib/common.js" th:src="@{/lib/common.js}"></script>
	
    <title>湿度</title>
</head>
<body  style="background-color:#054E6D;"> 


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 560px;height:130px;"></div>
	
	<script type="text/javascript" th:inline="javascript">
	
	var myChart = echarts.init(document.getElementById('main'));
	// 基于准备好的dom，初始化echarts实例
				
		$(document).ready(function() {
			try {

				// 使用刚指定的配置项和数据显示图表。
				getData();
			} catch (ex) {
				//
				return;
			}
		});
		var t
		function getData()
		{
							
                   sendAjaxRequest(/*[[@{/test/getWetData?type=dynamic}]]*/,null,null,function success(data){

                	   jsonCallBack(data);
                   })
							
				//t=setTimeout("getData()",10000);
		}
		// Generate data
		function jsonCallBack(data)
		{
			var resultobj=data.data;
			resultobj = eval('('+resultobj+')');
			var option = {
			title : [ {
				left : 'center',
				text : '湿度',
				textStyle : {
					fontStyle : 'normal',
					fontFamily : '微软雅黑',
					fontSize : 11,
					color : '#fff',
				},
			} ],
			backgroundColor : '#054E6D',
			tooltip : { //提示框组件
				trigger : 'axis',
				formatter : '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
				axisPointer : {
					type : 'shadow',
					label : {
						backgroundColor : '#054E6D'
					}
				},
				textStyle : {
					color : '#fff',
					fontStyle : 'normal',
					fontFamily : '微软雅黑',
					fontSize : 11,
				}
			},
			grid : {
				left : '1%',
				right : '4%',
				bottom : '6%',
				top : 30,
				padding : '0 0 10 0',
				containLabel : true,
			},
			legend : {//图例组件，颜色和名字
				right : 10,
				top : 0,
				itemGap : 16,
				itemWidth : 18,
				itemHeight : 10,
				data : [ {
					name : '站台',
				//icon:'image://../wwwroot/js/url2.png', //路径
				}, {
					name : '站厅',
				} ],
				textStyle : {
					color : '#a8aab0',
					fontStyle : 'normal',
					fontFamily : '微软雅黑',
					fontSize : 11,
				}
			},
			xAxis : [ {
				type : 'category',
				boundaryGap : true,//坐标轴两边留白
				data : [ '6:00', '7:00', '8:00', '9:00', '10:00', '11:00',
						'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
						'18:00', '19:00', '20:00', '21:00', '22:00', '23:00' ],
				axisLabel : { //坐标轴刻度标签的相关设置。
					interval : 1,//设置为 1，表示『隔一个标签显示一个标签』
					margin : 15,
					textStyle : {
						color : '#078ceb',
						fontStyle : 'normal',
						fontFamily : '微软雅黑',
						fontSize : 11,
					}
				},
				axisTick : {//坐标轴刻度相关设置。
					show : false,
				},
				axisLine : {//坐标轴轴线相关设置
					lineStyle : {
						color : '#fff',
						opacity : 0.2
					}
				},
				splitLine : { //坐标轴在 grid 区域中的分隔线。
					show : false,
				}
			} ],
			yAxis : [ {
				type : 'value',
				splitNumber : 5,
				axisLabel : {
					textStyle : {
						color : '#a8aab0',
						fontStyle : 'normal',
						fontFamily : '微软雅黑',
						fontSize : 11,
					}
				},
				axisLine : {
					show : false
				},
				axisTick : {
					show : false
				},
				splitLine : {
					show : true,
					lineStyle : {
						color : [ '#fff' ],
						opacity : 0.06
					}
				}

			} ],
			series : [
					{
						name : '站台',
						type : 'line',
						data : resultobj.data.platformWet,
						barWidth : 8,
						barGap : 0,//柱间距离
						label : {//图形上的文本标签
							normal : {
								show : true,
								position : 'top',
								textStyle : {
									color : '#a8aab0',
									fontStyle : 'normal',
									fontFamily : '微软雅黑',
									fontSize : 11,
								},
							},
						},
						itemStyle : {//图形样式
							normal : {
								barBorderRadius : [ 5, 5, 0, 0 ],
								color : new echarts.graphic.LinearGradient(0,
										0, 0, 1, [ {
											offset : 1,
											color : 'rgba(127, 128, 225, 0.7)'
										}, {
											offset : 0.9,
											color : 'rgba(72, 73, 181, 0.7)'
										}, {
											offset : 0.31,
											color : 'rgba(0, 208, 208, 0.7)'
										}, {
											offset : 0.15,
											color : 'rgba(0, 208, 208, 0.7)'
										}, {
											offset : 0,
											color : 'rgba(104, 253, 255, 0.7)'
										} ], false),
							},
						},
					},
					{
						name : '站厅',
						type : 'line',
						data : resultobj.data.hallWet,
						barWidth : 8,
						barGap : 0.1,//柱间距离
						label : {//图形上的文本标签
							normal : {
								show : true,
								position : 'top',
								textStyle : {
									color : '#a8aab0',
									fontStyle : 'normal',
									fontFamily : '微软雅黑',
									fontSize : 11,
								},
							},
						},
						itemStyle : {//图形样式
							normal : {
								barBorderRadius : [ 5, 5, 0, 0 ],
								color : new echarts.graphic.LinearGradient(0,
										0, 0, 1, [ {
											offset : 1,
											color : 'rgba(127, 128, 225, 0.7)'
										}, {
											offset : 0.9,
											color : 'rgba(72, 73, 181, 0.7)'
										}, {
											offset : 0.25,
											color : 'rgba(226, 99, 74, 0.7)'
										}, {
											offset : 0,
											color : 'rgba(253, 200, 106, 0.7)'
										} ], false),
							},
						},
					}

			]
		};
		// 使用刚指定的配置项和数据显示图表。

			myChart.setOption(option);
		}
	</script>
	
</body>
</html>